<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求管理 - 朋知云学</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <style>
        /* 需求管理页面特定样式 */
        .demand-filter-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .filter-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .filter-select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
        }
        
        .demand-table-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        .demand-title {
            font-weight: 500;
            color: #333;
            margin-bottom: 5px;
        }
        
        .demand-location {
            font-size: 13px;
            color: #666;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .demand-tags {
            display: flex;
            gap: 5px;
            margin-top: 5px;
            flex-wrap: wrap;
        }
        
        .demand-tag {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 12px;
            background-color: #f0f0f0;
            color: #666;
        }
        
        .demand-tag.subject {
            background-color: #e3f2fd;
            color: #1976d2;
        }
        
        .demand-tag.duration {
            background-color: #e8f5e9;
            color: #388e3c;
        }
        
        .demand-tag.urgent {
            background-color: #ffebee;
            color: #d32f2f;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 5px;
        }
        
        .page-item {
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .page-item:hover, .page-item.active {
            background-color: #5bc0eb;
            color: white;
            border-color: #5bc0eb;
        }
        
        .demand-actions-dropdown {
            position: relative;
        }
        
        .dropdown-menu {
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            min-width: 150px;
            z-index: 100;
            display: none;
        }
        
        .dropdown-menu.show {
            display: block;
        }
        
        .dropdown-item {
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.3s ease;
        }
        
        .dropdown-item:hover {
            background-color: #f8f9fa;
        }
        
        .dropdown-item i {
            font-size: 14px;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <!-- 页面加载动画 -->
    <div class="page-loader">
        <div class="loader"></div>
    </div>
    
    <!-- 管理员面板 -->
    <div class="admin-panel">朋知云学管理后台</div>
    
    <div class="admin-container">
        <!-- 侧边栏 -->
        <div class="admin-sidebar">
            <div class="admin-user">
                <div class="admin-user-info">
                    <div class="admin-username">管理员</div>
                    <div class="admin-role">超级管理员</div>
                </div>
            </div>
            
            <ul class="admin-sidebar-menu">
                <li class="admin-sidebar-item">
                    <a href="dashboard.html" class="admin-sidebar-link">
                        <i class="bi bi-speedometer2"></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="users.html" class="admin-sidebar-link">
                        <i class="bi bi-people"></i>
                        <span>用户管理</span>
                    </a>
                </li>
                <li class="admin-sidebar-item active">
                    <a href="demands.html" class="admin-sidebar-link">
                        <i class="bi bi-list-check"></i>
                        <span>需求管理</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="applications.html" class="admin-sidebar-link">
                        <i class="bi bi-file-earmark-text"></i>
                        <span>申请审核</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="settings.html" class="admin-sidebar-link">
                        <i class="bi bi-gear"></i>
                        <span>系统设置</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="../index.html" class="admin-sidebar-link">
                        <i class="bi bi-box-arrow-left"></i>
                        <span>返回前台</span>
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 主内容区 -->
        <div class="admin-content animate__animated animate__fadeIn">
            <div class="admin-header">
                <h1>需求管理</h1>
                <div class="admin-header-actions">
                    <div class="admin-search">
                        <i class="bi bi-search"></i>
                        <input type="text" placeholder="搜索需求..." id="demand-search-input">
                    </div>
                    <div class="admin-notifications">
                        <i class="bi bi-bell"></i>
                        <span class="badge">3</span>
                    </div>
                </div>
            </div>
            
            <!-- 需求筛选栏 -->
            <div class="demand-filter-bar">
                <div class="filter-group">
                    <select class="filter-select">
                        <option>所有需求</option>
                        <option>已发布</option>
                        <option>待审核</option>
                        <option>已关闭</option>
                    </select>
                    <select class="filter-select">
                        <option>所有地区</option>
                        <option>华东地区</option>
                        <option>华南地区</option>
                        <option>华北地区</option>
                        <option>西南地区</option>
                        <option>西北地区</option>
                        <option>东北地区</option>
                        <option>华中地区</option>
                    </select>
                    <select class="filter-select">
                        <option>所有学科</option>
                        <option>语文</option>
                        <option>数学</option>
                        <option>英语</option>
                        <option>物理</option>
                        <option>化学</option>
                        <option>生物</option>
                        <option>历史</option>
                        <option>地理</option>
                        <option>政治</option>
                        <option>音乐</option>
                        <option>美术</option>
                        <option>体育</option>
                    </select>
                </div>
                <button class="btn btn-primary">
                    <i class="bi bi-plus"></i> 添加需求
                </button>
            </div>
            
            <!-- 需求表格 -->
            <div class="demand-table-container">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="select-all-demands">
                            </th>
                            <th>需求信息</th>
                            <th>发布者</th>
                            <th>发布时间</th>
                            <th>申请人数</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 需求数据行 -->
                        <tr>
                            <td>
                                <input type="checkbox" class="demand-checkbox">
                            </td>
                            <td>
                                <div class="demand-info">
                                    <div class="demand-title">山区小学语文教师支教</div>
                                    <div class="demand-location">
                                        <i class="bi bi-geo-alt"></i> 云南省丽江市宁蒗县
                                    </div>
                                    <div class="demand-tags">
                                        <span class="demand-tag subject">语文</span>
                                        <span class="demand-tag duration">3个月</span>
                                        <span class="demand-tag urgent">紧急</span>
                                    </div>
                                </div>
                            </td>
                            <td>丽江市教育局</td>
                            <td>2023-09-15</td>
                            <td>8</td>
                            <td><span class="status-badge status-active">已发布</span></td>
                            <td>
                                <div class="table-actions">
                                    <button class="btn-icon" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="btn-icon" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <div class="demand-actions-dropdown">
                                        <button class="btn-icon dropdown-toggle" title="更多操作">
                                            <i class="bi bi-three-dots-vertical"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-check-circle"></i> 审核通过
                                            </a>
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-x-circle"></i> 拒绝
                                            </a>
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-arrow-up-circle"></i> 置顶
                                            </a>
                                            <a href="#" class="dropdown-item text-danger">
                                                <i class="bi bi-trash"></i> 删除
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" class="demand-checkbox">
                            </td>
                            <td>
                                <div class="demand-info">
                                    <div class="demand-title">乡村初中数学教师招募</div>
                                    <div class="demand-location">
                                        <i class="bi bi-geo-alt"></i> 四川省凉山州布拖县
                                    </div>
                                    <div class="demand-tags">
                                        <span class="demand-tag subject">数学</span>
                                        <span class="demand-tag duration">6个月</span>
                                    </div>
                                </div>
                            </td>
                            <td>凉山州教育局</td>
                            <td>2023-09-14</td>
                            <td>5</td>
                            <td><span class="status-badge status-pending">待审核</span></td>
                            <td>
                                <div class="table-actions">
                                    <button class="btn-icon" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="btn-icon" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <div class="demand-actions-dropdown">
                                        <button class="btn-icon dropdown-toggle" title="更多操作">
                                            <i class="bi bi-three-dots-vertical"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-check-circle"></i> 审核通过
                                            </a>
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-x-circle"></i> 拒绝
                                            </a>
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-arrow-up-circle"></i> 置顶
                                            </a>
                                            <a href="#" class="dropdown-item text-danger">
                                                <i class="bi bi-trash"></i> 删除
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" class="demand-checkbox">
                            </td>
                            <td>
                                <div class="demand-info">
                                    <div class="demand-title">留守儿童英语课后辅导</div>
                                    <div class="demand-location">
                                        <i class="bi bi-geo-alt"></i> 贵州省黔东南州黎平县
                                    </div>
                                    <div class="demand-tags">
                                        <span class="demand-tag subject">英语</span>
                                        <span class="demand-tag duration">1个月</span>
                                    </div>
                                </div>
                            </td>
                            <td>黎平县教育局</td>
                            <td>2023-09-13</td>
                            <td>12</td>
                            <td><span class="status-badge status-active">已发布</span></td>
                            <td>
                                <div class="table-actions">
                                    <button class="btn-icon" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="btn-icon" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <div class="demand-actions-dropdown">
                                        <button class="btn-icon dropdown-toggle" title="更多操作">
                                            <i class="bi bi-three-dots-vertical"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-check-circle"></i> 审核通过
                                            </a>
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-x-circle"></i> 拒绝
                                            </a>
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-arrow-up-circle"></i> 置顶
                                            </a>
                                            <a href="#" class="dropdown-item text-danger">
                                                <i class="bi bi-trash"></i> 删除
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" class="demand-checkbox">
                            </td>
                            <td>
                                <div class="demand-info">
                                    <div class="demand-title">山区小学科学实验课教师</div>
                                    <div class="demand-location">
                                        <i class="bi bi-geo-alt"></i> 甘肃省陇南市文县
                                    </div>
                                    <div class="demand-tags">
                                        <span class="demand-tag subject">科学</span>
                                        <span class="demand-tag duration">2个月</span>
                                    </div>
                                </div>
                            </td>
                            <td>文县教育局</td>
                            <td>2023-09-12</td>
                            <td>3</td>
                            <td><span class="status-badge status-closed">已关闭</span></td>
                            <td>
                                <div class="table-actions">
                                    <button class="btn-icon" title="查看详情">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="btn-icon" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <div class="demand-actions-dropdown">
                                        <button class="btn-icon dropdown-toggle" title="更多操作">
                                            <i class="bi bi-three-dots-vertical"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-arrow-counterclockwise"></i> 重新开放
                                            </a>
                                            <a href="#" class="dropdown-item">
                                                <i class="bi bi-arrow-up-circle"></i> 置顶
                                            </a>
                                            <a href="#" class="dropdown-item text-danger">
                                                <i class="bi bi-trash"></i> 删除
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <div class="pagination">
                <div class="page-item"><i class="bi bi-chevron-left"></i></div>
                <div class="page-item active">1</div>
                <div class="page-item">2</div>
                <div class="page-item">3</div>
                <div class="page-item">...</div>
                <div class="page-item">8</div>
                <div class="page-item"><i class="bi bi-chevron-right"></i></div>
            </div>
        </div>
    </div>

    <script src="../js/main.js"></script>
    <script src="../js/admin.js"></script>
    <script>
        // 页面加载完成后隐藏加载动画
        window.addEventListener('load', function() {
            const pageLoader = document.querySelector('.page-loader');
            if (pageLoader) {
                pageLoader.style.opacity = '0';
                setTimeout(() => {
                    pageLoader.style.display = 'none';
                }, 500);
            }
        });
        
        // 下拉菜单交互
        document.addEventListener('DOMContentLoaded', function() {
            const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
            
            dropdownToggles.forEach(toggle => {
                toggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const dropdown = this.nextElementSibling;
                    
                    // 关闭所有其他下拉菜单
                    document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
                        if (menu !== dropdown) {
                            menu.classList.remove('show');
                        }
                    });
                    
                    // 切换当前下拉菜单
                    dropdown.classList.toggle('show');
                });
            });
            
            // 点击页面其他地方关闭下拉菜单
            document.addEventListener('click', function() {
                document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
                    menu.classList.remove('show');
                });
            });
            
            // 全选功能
            const selectAllCheckbox = document.getElementById('select-all-demands');
            const demandCheckboxes = document.querySelectorAll('.demand-checkbox');
            
            if (selectAllCheckbox) {
                selectAllCheckbox.addEventListener('change', function() {
                    demandCheckboxes.forEach(checkbox => {
                        checkbox.checked = this.checked;
                    });
                });
            }
        });
    </script>
</body>
</html>